{% extends "base.html" %}

{% block title %}{{ blind_box.name }} - 盲盒详情{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-12 d-flex justify-content-between align-items-center">
        <h2 class="mb-0"><i class="fas fa-box me-2"></i>盲盒详情</h2>
        <div>
            <a href="{{ url_for('blind_box.list') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left me-1"></i>返回列表
            </a>
            <a href="{{ url_for('blind_box.edit', box_id=blind_box.box_id) }}" class="btn btn-primary ms-2">
                <i class="fas fa-edit me-1"></i>编辑
            </a>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-4 mb-4">
        <div class="card shadow-sm h-100">
            <div class="card-body text-center">
                {% if blind_box.image_url %}
                <img src="{{ blind_box.image_url }}" class="img-fluid rounded mb-3" alt="{{ blind_box.name }}" style="max-height: 200px;">
                {% else %}
                <div class="bg-light d-flex justify-content-center align-items-center mb-3" style="height: 200px;">
                    <i class="fas fa-box fa-5x text-muted"></i>
                </div>
                {% endif %}
                
                <h3 class="mb-2">{{ blind_box.name }}</h3>
                <div class="mb-3">
                    <span class="badge bg-{% if blind_box.status == 1 %}success{% else %}secondary{% endif %} mb-2">
                        {% if blind_box.status == 1 %}上架{% else %}下架{% endif %}
                    </span>
                    <span class="badge bg-info mb-2">{{ blind_box.category }}</span>
                </div>
                
                <div class="d-flex justify-content-center align-items-center mb-3">
                    <span class="text-danger h4 mb-0">¥{{ blind_box.discount_price }}</span>
                    <span class="text-muted text-decoration-line-through ms-2">¥{{ blind_box.original_price }}</span>
                    <span class="badge bg-warning text-dark ms-2">{{ (blind_box.discount_rate * 100)|int }}% OFF</span>
                </div>
                
                <div class="btn-group w-100">
                    <a href="{{ url_for('blind_box.toggle_status', box_id=blind_box.box_id) }}" class="btn btn-{% if blind_box.status == 1 %}warning{% else %}success{% endif %}">
                        <i class="fas {% if blind_box.status == 1 %}fa-eye-slash{% else %}fa-eye{% endif %} me-1"></i>
                        {% if blind_box.status == 1 %}下架{% else %}上架{% endif %}
                    </a>
                    <a href="{{ url_for('blind_box.delete', box_id=blind_box.box_id) }}" class="btn btn-danger btn-delete">
                        <i class="fas fa-trash me-1"></i>删除
                    </a>
                </div>
                
                <!-- 添加数据分析按钮 -->
                <div class="mt-3">
                    <a href="{{ url_for('analytics.sales_prediction', type='forecast', category=blind_box.category, box_id=blind_box.box_id, auto='true') }}" class="btn btn-info w-100">
                        <i class="fas fa-chart-line me-1"></i>分析此盲盒销售趋势
                    </a>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-8">
        <div class="card shadow-sm mb-4">
            <div class="card-header bg-light">
                <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>基本信息</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <h6 class="text-muted">盲盒编号</h6>
                        <p>{{ blind_box.box_id }}</p>
                    </div>
                    <div class="col-md-6 mb-3">
                        <h6 class="text-muted">唯一编码</h6>
                        <p>{{ blind_box.unique_code or '未设置' }}</p>
                    </div>
                    <div class="col-md-6 mb-3">
                        <h6 class="text-muted">所属超市</h6>
                        <p>{{ blind_box.supermarket.name if blind_box.supermarket else '未关联超市' }}</p>
                    </div>
                    <div class="col-md-6 mb-3">
                        <h6 class="text-muted">商品分类</h6>
                        <p>{{ blind_box.category or '未分类' }}</p>
                    </div>
                    <div class="col-md-6 mb-3">
                        <h6 class="text-muted">库存数量</h6>
                        <p>
                            {% if blind_box.stock == 0 %}
                            <span class="badge bg-danger">缺货</span>
                            {% elif blind_box.stock < 10 %}
                            <span class="badge bg-warning text-dark">低库存({{ blind_box.stock }})</span>
                            {% else %}
                            {{ blind_box.stock }}
                            {% endif %}
                        </p>
                    </div>
                    <div class="col-md-6 mb-3">
                        <h6 class="text-muted">销售数量</h6>
                        <p>{{ blind_box.sales or 0 }}</p>
                    </div>
                    <div class="col-md-6 mb-3">
                        <h6 class="text-muted">原价</h6>
                        <p>¥{{ blind_box.original_price }}</p>
                    </div>
                    <div class="col-md-6 mb-3">
                        <h6 class="text-muted">折扣价</h6>
                        <p>¥{{ blind_box.discount_price }}</p>
                    </div>
                    <div class="col-md-6 mb-3">
                        <h6 class="text-muted">创建时间</h6>
                        <p>{{ blind_box.create_time.strftime('%Y-%m-%d %H:%M:%S') if blind_box.create_time else '未知' }}</p>
                    </div>
                    <div class="col-md-6 mb-3">
                        <h6 class="text-muted">更新时间</h6>
                        <p>{{ blind_box.update_time.strftime('%Y-%m-%d %H:%M:%S') if blind_box.update_time else '未知' }}</p>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="card shadow-sm">
            <div class="card-header bg-light">
                <h5 class="mb-0"><i class="fas fa-align-left me-2"></i>详细描述</h5>
            </div>
            <div class="card-body">
                {% if blind_box.description %}
                <p class="mb-0">{{ blind_box.description }}</p>
                {% else %}
                <p class="text-muted mb-0">暂无描述</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}
